@using ThridGroup.ERP.DTO
@model WarehouseSettingDto
@{
    ViewData["Title"] = Model.Id > 0 ? "编辑仓库设置" : "添加仓库设置";
    Layout = null;
}

<link href="~/libs/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
<style>
    .form-container {
        padding: 32px 0;
        background: #f4f6fa;
        min-height: 100vh;
        font-family: 'Segoe UI', 'Microsoft YaHei', Arial, sans-serif;
        max-width: 600px;
        margin: 0 auto;
    }
    .layui-form-label {
        width: 120px;
        padding: 10px 15px;
        font-size: 16px;
        color: #1e9fff;
        font-weight: 500;
        background: none;
    }
    .layui-input-block {
        margin-left: 150px;
    }
    .layui-form-item {
        margin-bottom: 22px;
    }
    .layui-input, .layui-textarea, .layui-select {
        height: 40px;
        line-height: 40px;
        border-radius: 6px;
        padding: 0 12px;
        border: 1px solid #e6eaf0;
        font-size: 15px;
        background: #f9fbfd;
        transition: border-color 0.2s;
    }
    .layui-input:focus, .layui-textarea:focus, .layui-select:focus {
        border-color: #1e9fff;
        background: #fff;
    }
    .layui-textarea {
        height: 90px;
        line-height: 22px;
        padding: 12px;
        resize: vertical;
        border-radius: 6px;
    }
    .form-actions {
        text-align: center;
        margin-top: 36px;
    }
    .form-actions .layui-btn {
        height: 42px;
        line-height: 42px;
        padding: 0 32px;
        font-size: 16px;
        margin: 0 12px;
        border-radius: 6px;
        font-weight: 500;
    }
    .form-actions .layui-btn-primary {
        border: 1px solid #e6eaf0;
        background: #fff;
        color: #1e9fff;
    }
    .form-actions .layui-btn-primary:hover {
        background: #e3f2fd;
        color: #1890ff;
    }
    .form-actions .layui-btn-normal {
        background-color: #1E9FFF;
        color: #fff;
    }
    .form-actions .layui-btn-normal:hover {
        background: #1890ff;
    }
    .required:after {
        content: '*';
        color: red;
        margin-left: 4px;
    }
    .layui-form-select dl {
        max-height: 200px;
    }
    /* 响应式优化 */
    @@media (max-width: 800px) {
        .form-container {
            padding: 8px 0;
            max-width: 100%;
        }
        .layui-form-label {
            width: 80px;
            font-size: 13px;
        }
        .layui-input, .layui-textarea, .layui-select {
            font-size: 13px;
        }
    }
</style>

<div class="form-container">
    <div class="form-title">@ViewData["Title"]</div>
    
    <form class="layui-form" lay-filter="warehouseForm" style="padding: 20px 0;">
        <input type="hidden" name="Id" value="@Model.Id">
        
        <div class="layui-form-item">
            <label class="layui-form-label required">仓库编码</label>
            <div class="layui-input-block">
                <div class="code-input-group">
                    <input type="text" name="DepotCode" id="depotCode" value="@Model.DepotCode" lay-verify="required" 
                           lay-reqtext="仓库编码不能为空" placeholder="请输入仓库编码" class="layui-input">
                    <div class="auto-generate-switch">
                        <span class="switch-label">自动生成</span>
                        <div class="custom-switch" id="autoGenerateSwitch"></div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label required">仓库名称</label>
            <div class="layui-input-block">
                <input type="text" name="DepotName" value="@Model.DepotName" lay-verify="required" 
                       lay-reqtext="仓库名称不能为空" placeholder="请输入仓库名称" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">位置</label>
            <div class="layui-input-block">
                <textarea name="Location" placeholder="请输入内容" class="layui-textarea">@Model.Location</textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">面积</label>
            <div class="layui-input-block">
                <div class="number-input-group">
                    <div class="number-btn" onclick="decreaseNumber()">-</div>
                    <input type="number" name="Area" id="areaInput" value="@Model.Area" lay-verify="number" 
                           placeholder="0" class="layui-input" min="0" step="1">
                    <div class="number-btn" onclick="increaseNumber()">+</div>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">负责人</label>
            <div class="layui-input-block">
                <input type="text" name="Head" value="@Model.Head" 
                       placeholder="请输入负责人" class="layui-input">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea name="Remark" placeholder="请输入备注信息" class="layui-textarea">@Model.Remark</textarea>
            </div>
        </div>
        
        <div class="form-buttons">
            <button type="submit" class="layui-btn layui-btn-normal" lay-submit lay-filter="submitForm" id="submitBtn">
                <i class="layui-icon layui-icon-ok"></i> 确定
            </button>
            <button type="button" class="layui-btn layui-btn-primary" id="cancelBtn">
                <i class="layui-icon layui-icon-close"></i> 取消
            </button>
        </div>
    </form>
</div>

<script src="~/libs/jquery/jquery.js"></script>
<script src="~/libs/scripts/layui-v2.5.6/layui/layui.js"></script>
<script>
    layui.use(['form', 'layer'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;

        var isEdit = @(Model.Id > 0 ? "true" : "false");
        var warehouseId = @Model.Id;
        var autoGenerate = false;

        // 自动生成开关事件
        $('#autoGenerateSwitch').on('click', function() {
            autoGenerate = !autoGenerate;
            $(this).toggleClass('active', autoGenerate);
            
            var $depotCode = $('#depotCode');
            if (autoGenerate) {
                $depotCode.prop('readonly', true).css('background-color', '#f5f5f5');
                generateDepotCode();
            } else {
                $depotCode.prop('readonly', false).css('background-color', '#fff');
            }
        });

        // 生成仓库编码
        function generateDepotCode() {
            var timestamp = new Date().getTime();
            var random = Math.floor(Math.random() * 1000).toString().padStart(3, '0');
            var code = 'WH' + timestamp.toString().slice(-8) + random;
            $('#depotCode').val(code);
        }

        // 监听表单提交
        form.on('submit(submitForm)', function (data) {
            var field = data.field;
            var submitUrl = isEdit ? '/WarehouseManagement/WarehouseSetting/Update' : '/WarehouseManagement/WarehouseSetting/Add';
            
            // 显示加载状态
            var loadingIndex = layer.load(1, { content: '正在提交...' });
            
            // 设置按钮为禁用状态
            $('#submitBtn').prop('disabled', true).html('<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i> 提交中...');
            
            $.ajax({
                url: submitUrl,
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(field),
                success: function (res) {
                    layer.close(loadingIndex);
                    
                    if (res.code === 0) {
                        layer.msg(isEdit ? '更新成功' : '添加成功', { icon: 1 }, function () {
                            // 关闭当前弹窗
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                            
                            // 刷新父页面的表格
                            if (parent.layui && parent.layui.table) {
                                parent.layui.table.reload('warehouseTable');
                            }
                        });
                    } else {
                        layer.msg(res.msg || '操作失败', { icon: 2 });
                        // 恢复按钮状态
                        $('#submitBtn').prop('disabled', false).html('确定');
                    }
                },
                error: function (xhr, status, error) {
                    layer.close(loadingIndex);
                    layer.msg('网络错误，请重试', { icon: 2 });
                    // 恢复按钮状态
                    $('#submitBtn').prop('disabled', false).html('确定');
                }
            });
            
            return false; // 阻止表单跳转
        });

        // 取消按钮事件
        $('#cancelBtn').on('click', function () {
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        });

        // 自定义验证规则
        form.verify({
            required: function(value, item) {
                if (!value || value.trim() === '') {
                    return $(item).attr('lay-reqtext') || '此项为必填项';
                }
            },
            depotCode: function(value) {
                if (value && value.length > 50) {
                    return '仓库编码长度不能超过50个字符';
                }
            },
            depotName: function(value) {
                if (value && value.length > 100) {
                    return '仓库名称长度不能超过100个字符';
                }
            },
            location: function(value) {
                if (value && value.length > 200) {
                    return '位置长度不能超过200个字符';
                }
            },
            head: function(value) {
                if (value && value.length > 50) {
                    return '负责人长度不能超过50个字符';
                }
            },
            remark: function(value) {
                if (value && value.length > 500) {
                    return '备注长度不能超过500个字符';
                }
            }
        });

        // 渲染表单
        form.render();
    });

    // 数字输入框增加按钮
    function increaseNumber() {
        var $input = $('#areaInput');
        var currentValue = parseInt($input.val()) || 0;
        $input.val(currentValue + 1);
    }

    // 数字输入框减少按钮
    function decreaseNumber() {
        var $input = $('#areaInput');
        var currentValue = parseInt($input.val()) || 0;
        if (currentValue > 0) {
            $input.val(currentValue - 1);
        }
    }
</script> 